<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<img src="reg.png" width="100%" alt="">
			</el-col>
			<el-col :span="12">
				<el-form style="margin-top:50px" :model="userInfo" ref="userInfo" :rules="rules" label-width="80px">
					<el-form-item>
						<h1>立即注册 <a href="/login"
								style="font-size: 15px;float: right;text-decoration: none;">已有账号,立即登录</a></h1>
					</el-form-item>
					<el-form-item label="用户名" prop="username">
						<el-input v-model="userInfo.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="userInfo.password"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="nickName">
						<el-input v-model="userInfo.nickName"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="reg('userInfo')">注册</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					username: '',
					password: '',
					nickName: ''
				},
				// 添加校正规则
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 15,
							message: '长度在 3 到 15 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 6,
							message: '长度在 3 到 6 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			reg(formName) {
				//先校正规则
				this.$refs[formName].validate((valid) => {
					if (valid) { //如果通过既可以完成注册
						alert('submit!');
						//调用接口
						/*
						  this.axios(' http://ip:port/v1/users/reg ',userInfo).then(
						    if(注册成功){
								alert('注册成功')
							}else{
								alert('用户名注册失败')
							}
						  )
						
						*/
					} else { //否则提示用户注册失败
						console.log('error submit!!');
						return false;
					}
				})
			}
		}
	}
</script>

<style scoped>
</style>